<template>
  <div>
    <h1>App组件</h1>
    <Pager ref="pagerRef" :limit="limit" @pageChange="handelPageChange($event)" :total="total" :current="current" />
  </div>
</template>
<script>

import Pager from './';

export default {
  components: {
    Pager,
  },
  data() {
    return {
      current: 1,
      total: 203,
      limit: 10,
    }
  },
  methods: {
    handelPageChange(newPage) {
      newPage < 1 && (newPage = 1);
      const pagers = this.$refs.pagerRef.pageNumber;
      newPage > pagers && (newPage = pagers);

      if (newPage === this.current) {
        return;
      };
      this.current = newPage;
      // 加载当前页数据
    }
  }
};
</script>

<style scoped>
.iconfont {
  font-size: 2em;
  color: blue;
}
</style>